<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			@scrollChange="scrollChange" 
			title="商品详情"
			titlePaddingLeft="30"
			navi_background="#fff"
			:placeholder="true"
			:isShowBackArrow="true"
		>	
		</customHead>
		<view class="content_main">
			<view class="content_swiper" v-if="goodsDetail.rotationImgsJson && goodsDetail.rotationImgsJson.length">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in goodsDetail.rotationImgsJson" :key="index">
						<image class="image" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="content_swiper" v-else>
				<view class="swiper">
					<image class="image" :src="goodsDetail.previewUrl" mode="aspectFill"></image>
				</view>
			</view>
			<view class="goods_desc">
				<view class="totalprice" v-if="selectedSpec">
					<text>{{selectSpecObj.dealPrice? selectSpecObj.dealPrice * goodsNum: ''}}积分</text>
				</view>
				<view class="totalprice" v-else>
					<text>{{goodsDetail.goodsPrice? goodsDetail.goodsPrice * goodsNum: ''}}积分</text>
				</view>
				<view class="title">
					<text>{{goodsDetail.goodsName}}</text>
				</view>
				<view class="desc">
					<text>{{goodsDetail.goodsRemarks}}</text>
				</view>
				<view class="stockNum">
					<text v-if="selectedSpec">{{selectSpecObj.stockNum > 10? '库存充足': `库存：${selectSpecObj.stockNum}`}}</text>
					<text v-else>{{goodsDetail.stockNum > 10? '库存充足': `库存：${goodsDetail.stockNum}`}}</text>
				</view>
			</view>
			<view class="Specification" style="margin-top: 20rpx;" @click="submitPopup('')">
				<view class="spec_title">
					<text>{{selectedSpec?'选择规格':'选择数量'}}</text>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
				<view class="spec_content_selected">
					<view class="select_item" v-if="selectedSpec">
						<view class="Specifications-left">
							<view class="select">已选规格：</view>
							<view class="Specifications-text">
								{{selectedSpec}}
							</view>
						</view>
					</view>
					<view class="select_item">
						<view class="Specifications-left">
							<view class="select">已选数量：</view>
							<view class="Specifications-text">
								{{goodsNum}}件
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detail_box">
				<view class="title">
					<text>商品详情</text>
				</view>
				<view class="detail">
					<u-parse :content="goodsDetail.goodsDetailsJson"></u-parse>
				</view>
			</view>
			<view class="navibarBottom">
				<view class="navibarBottom_box">
					<view class="exchangeImme" :style="{backgroundColor: _temp_themeColor}" @click="shows = true">立即兑换</view>
				</view>
			</view>
				
			<u-popup :show="shows" mode="bottom" @close="shows=false" @open="">
				<view class="Specifications">
					<view class="Specifications-mask"></view>
					<view class="Specifications-popup">
						<view class="Specifications-popup-colse cuIcon-roundclose" @click="shows=false">
							<u-icon name="close-circle" size="24"></u-icon>
						</view>
						<view class="Specifications-popup-head">
							<view class="Specifications-popup-head-img">
								<image class="image" v-if="selectSpecObj.specificationImages" mode="aspectFill" :src="selectSpecObj.specificationImages"></image>
								<image class="image" v-else mode="aspectFill" :src="goodsDetail.previewUrl"></image>
							</view>
							<view class="Specifications-popup-head-text">
								<view class="" v-if="selectSpecObj.id">
									<view class="Specifications-popup-head-text-price">
										<text>{{selectSpecObj.dealPrice * goodsNum}}积分</text>
									</view>
									<view class="Specifications-popup-head-text-parameter">
										<text class="text">库存：{{selectSpecObj.stockNum}}</text>
									</view>
								</view>
								<view class="" v-else>
									<view class="Specifications-popup-head-text-price"><label
										for=""></label><text>{{goodsDetail.goodsPrice * goodsNum}}积分</text>
									</view>
									<view class="Specifications-popup-head-text-parameter">
										<text>库存：{{goodsDetail.stockNum}}</text>
									</view>
								</view>
							</view>
						</view>
						<scroll-view scroll-y class="Specifications-huadong" v-if="spec_name_list.length > 0">
							<view class="Specifications-popup-sele" v-for="(item1, index1) in spec_name_list" :key="index1">
								<view class="Specifications-popup-sele-name">{{item1.name}}</view>
								<view class="Specifications-popup-sele-list">
									<text 
										:style="{color: item2.selectFlag? _temp_themeColor:'', border: `2rpx solid ${_temp_themeColor}`}"
										:class="item2.selectFlag ?'rmoiu':'' "
										@click="selectSpecItem(index1, index2)"
										v-for="(item2, index2) in item1.children"
										:key="index2"
									>
										{{item2.attributeValue}}
									</text>
								</view>
							</view>
						</scroll-view>
						<view class="Specifications-popup-munbar">
							<view class="Specifications-popup-munbar-name">购买数量</view>
							<view class="redmunber">
								<u-number-box v-model="goodsNum" :min="1" :max="maxGoodsNum">
									<view slot="minus" class="minus _clickOpacity">
										<u-icon name="minus-circle" size="20"></u-icon>
									</view>
									<input type="text" slot="input" v-model="goodsNum" style="width: 80rpx;text-align: center;border: none;" >
									<view slot="plus" class="plus _clickOpacity">
										<u-icon name="plus-circle" :color="_temp_themeColor" size="20"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
						<view class="Specifications-popup-but">
							<view class="exchangeImme" :style="{backgroundColor: _temp_themeColor}" @click="buyImmediately">立即兑换</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		searchPlugsGoodsById,
		searchPlugsGoodsSpecificationByGoodsId,
		insertPlugsShopCart,
		insertPlugsCollect,
		searchPlugsCollectByUserId,
		cancelCollectByDataId,
		getGoodesCouponsList
	} from '@/tools/request/api.js'
	export default {
		data() {
			return {
				loading_show: false,
				goodsDetail: {},
				goodsId: 0,
				specificationInfo: [],
				spec_name_list: [],
				specIndex1: 0,
				specIndex2: 0,
				selectedSpec: '',
				selectSpecObj: {},
				goodsNum: 1,
				payType: '',
				shows: false,
				collectList: [],
				is_collect: false,
				
			};
		},
		onLoad (option) {
			this.goodsId = option.id;
			this.getGoodsDetail();
			this.saveLateLyGoodsIds();
		},
		computed: {
			maxGoodsNum () {
				if (this.selectedSpec) {
					return this.selectSpecObj.stockNum;
				} else {
					return Math.min(this.goodsDetail.stockNum, this.goodsDetail.limitNum);
				}
			}
		},
		methods: {
			// 将最近浏览的商品储存在本地
			saveLateLyGoodsIds () {
				let historyGoodsIds = uni.getStorageSync('historyGoodsIds');
				if (Array.isArray(historyGoodsIds) && historyGoodsIds.length) {
					historyGoodsIds.unshift(this.goodsId);
					if (historyGoodsIds.length > 100) {
						historyGoodsIds.pop();
					}
					uni.setStorageSync('historyGoodsIds', historyGoodsIds);
				} else {
					uni.setStorageSync('historyGoodsIds', [this.goodsId]);
				}
			},
			gotoHome () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			gotoCart () {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			getcollectList() {
				let postdata = {
					businessId: this.businessId,
					page: 1,
					size: 999
				}
				searchPlugsCollectByUserId(postdata).then(res => {
					this.loading_show = false;
					if (res.code == 200) {
						let list2 = res.body.list;
						this.collectList = list2.filter(itm => itm.dataId === this.goodsDetail.id);
						if (this.collectList.length > 0) {
							this.is_collect = true;
						}
					}
				})
			},
			// 添加收藏
			addOften () {
				if (!this.accessToken) {
					uni.showModal({
						title: '提示',
						content: '登录才能添加宝贝哦~',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subpack_login/login/login'
								});
							} else if (res.cancel) {
							}
						}
					});
					return;
				}
				if (this.is_collect) return this.cancelOften();
				let postdata = {
					businessId: this.businessId,
					dataId: this.goodsDetail.id,
					types: 0,
				}
				insertPlugsCollect(postdata).then(res => {
					if (res.code != 200) return uni.$showMsg();
					this.is_collect = true;
					uni.$showMsg('添加成功');
				})
			},
			// 取消收藏
			cancelOften () {
				let postdata = {
					businessId: this.businessId,
					dataId: this.goodsDetail.id,
					dataType: 0,
				}
				cancelCollectByDataId(postdata).then(res => {
					if (res.code != 200) return uni.$showMsg();
					this.is_collect = false;
					uni.$showMsg('已取消');
				})
			},
			// 获取商品信息
			getGoodsDetail () {
				this.loading_show = true;
				searchPlugsGoodsById(this.goodsId).then(res => {
					if (res.code == 200) {
						if (res.body.rotationImgsJson) {
							res.body.rotationImgsJson = JSON.parse(res.body.rotationImgsJson);
						} else {
							res.body.rotationImgsJson = [];
						}
						this.goodsDetail = res.body;
						this.getGoodsSpecification();
						this.getcollectList();
					}
				})
			},
			submitPopup (type) {
				this.shows = true;
				this.payType = type;
			},
			// 选择规格
			selectSpecItem (index1, index2) {
				this.goodsNum = 1;
				this.spec_name_list[index1].children.forEach((item, index) => {
					item.selectFlag = index2 == index ? true : false;
				});
				this.countPrice();
			},
			// 选择规格时计算价格
			countPrice () {
				let name = '';
				let value = '';
				let selected = [];
				let selectObj = {};
				this.spec_name_list.forEach((item, index) => {
					let result = item.children.find((item1, index1) => {
						return item1.selectFlag;
					});
					name = item.name;
					value = result.attributeValue;
					selected.push(name + '：' + value);
					selectObj[name] = value;
				});
				this.selectedSpec = selected.join('，');
				let item = this.specificationInfo.find((item) => {
					let obj = item.specificationName;
					obj = JSON.parse(obj);
					let obj2 = {};
					let ret = Object.assign(obj2, obj);
					return this.isObjectValueEqual(ret, selectObj);
				});
				this.selectSpecObj = item;
			},
			// 对比两个对象的值是否完全相等 返回值 true/false
			isObjectValueEqual (a, b) {   
				//取对象a和b的属性名
				var aProps = Object.getOwnPropertyNames(a);
				var bProps = Object.getOwnPropertyNames(b);
				//判断属性名的length是否一致
				if (aProps.length != bProps.length) {
					return false;
				};
				//循环取出属性名，再判断属性值是否一致
				for (var i = 0; i < aProps.length; i++) {
					var propName = aProps[i];
					if (a[propName] !== b[propName]) {
						return false;
					};
				};
				return true;
			},
			// 获取商品规格
			getGoodsSpecification () {
				searchPlugsGoodsSpecificationByGoodsId({
					goodsId: this.goodsId
				}).then(res => {
					if (res.code == 200) {
						let spec_list = res.body.plugsGoodsSpecificationList;
						let spec_name_list = res.body.specificationInfo;
						if (!spec_list.length || !spec_name_list) return;
						this.specificationInfo = spec_list;
						let specifications = [];
						spec_name_list.forEach((item, index) => {
							let key = Object.keys(item)[0];
							specifications.push({
								name: key,
								children: []
							})
							item[key].forEach((item1, index1) => {
								item1.selectFlag = index1 ? false:true;
								specifications[index].children.push(item1);
							})
						})
						this.spec_name_list = specifications;
						this.countPrice();
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'error'
						})
					}
				})
			},
			addCart () {
				let postData = {
					goodsId: this.goodsDetail.id,
					goodsCategoryId: this.goodsDetail.categoryId.toString(),
					goodsNum: this.goodsNum,
					goodsSpecificationIds: this.selectSpecObj.id,
					businessId: this.businessId
				};
				insertPlugsShopCart(postData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '加入成功',
							duration: 1000
						})
						this.shows = false;
					} else {
						uni.showToast({
							title: '加入失败',
							duration: 1000,
							icon: 'error'
						})
					}
				})
			},
			buyImmediately () {
				if (this.selectedSpec) {
					if (this.selectSpecObj.stockNum < 1) {
						return uni.$showMsg('库存不足');
					}
				} else {
					if (this.goodsDetail.stockNum < 1) {
						return uni.$showMsg('库存不足');
					}
				}
				this.shows = false;
				let goodsSpecificationIds = []
				let goodsSpecification = [];
				let postData = {
					goodsId: this.goodsDetail.id,
					previewUrl: this.goodsDetail.previewUrl,
					goodsPrice: this.selectedSpec? this.selectSpecObj.dealPrice: this.goodsDetail.goodsPrice,
					goodsCategoryId: this.goodsDetail.categoryId,
					goodsNum: this.goodsNum,
					goodsSpecificationIds: 0,
					goodsSpecification: goodsSpecification,
					businessId: this.businessId,
					distributionFee: this.goodsDetail.distributionFee,
					goodsName: this.goodsDetail.goodsName,
					userId: uni.getStorageSync('__ddminiUserInfo').id || 0
				};
				console.log(postData, 'postData')
				uni.setStorage({
					key: '__ddminiShopCart',
					data: [postData]
				});
				
				if (this.accessToken) {
					uni.setStorage({
						key: '__ddminiShopCart',
						data: [postData]
					});
					uni.navigateTo({
						url: '/pages/order/payEnter/payEnter?score=1'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '登录才能购买宝贝哦~',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/subpack_login/login/login'
								})
							} else if (res.cancel) {}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		
		.content_main{
			padding-bottom: 220rpx;
			
			.content_swiper{
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				border-radius: 20rpx;
				overflow: hidden;
				
				.swiper{
					width: 100%;
					height: 600rpx;
					
					.image{
						width: 100%;
						height: 600rpx;
						border-radius: 20rpx;
					}
				}
			}
			.goods_desc{
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				
				.totalprice{
					padding-bottom: 30rpx;
					color: #ff5831;
					font-size: 36rpx;
					font-weight: bold;
				}
				
				.title{
					font-weight: bold;
					padding-bottom: 20rpx;
				}
				.grand{
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					
					.item{
						display: flex;
						flex-direction: column;
						
						.item_tit{
							font-size: 28rpx;
							padding-bottom: 10rpx;
						}
						.item_desc{
							color: #888888;
							font-size: 28rpx;
						}
					}
				}
				.desc{
					padding: 20rpx 0;
					font-size: 30rpx;
					color: #626262;
				}
				.stockNum{
					font-size: 24rpx;
					color: #adadad;
				}
			}
			
			.Specification {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 30rpx;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx;
					
					.spec_title{
						display: flex;
						justify-content: space-between;
						padding-bottom: 30rpx;
						font-weight: bold;
					}
					
					.spec_content_selected{
						
					}
					
					.select_item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.Specifications-left {
							display: flex;
							align-items: center;
							color: #5a5a5a;
								
							.select {
							}
						}
					}
			
					
				}
			
			.send_methods{
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				
				.title{
					padding-right: 20rpx;
				}
				.desc{
					color: #737373;
				}
			}
			.params{
				padding: 0 30rpx;
				margin-top: 80rpx;
				margin-bottom: 30rpx;
				
				.title{
					display: flex;
					align-items: center;
				}
				.main{
					border: 1rpx solid #e6e6e6;
					border-radius: 20rpx;
					margin-top: 20rpx;
					
					.item{
						border-bottom: 1rpx solid #e6e6e6;
						padding: 10rpx 20rpx;
						display: flex;
						align-items: center;
						
						.title{
							width: 200rpx;
							font-size: 30rpx;
							color: #757575;
						}
						.desc{
							font-size: 30rpx;
						}
					}
				}
			}
			.detail_box{
				padding: 0 30rpx;
				margin-top: 60rpx;
			}
			.navibarBottom{
				width: 100%;
				display: flex;
				border-top: 1rpx solid #efefef;
				background-color: #fff;
				position: fixed;
				bottom: 0;
				left: 0;
				padding-bottom: 40rpx;
				padding-top: 20rpx;
				box-shadow: 0 -5rpx 10rpx 5rpx #f3f3f3;
				
				.navibarBottom_box{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					box-sizing: border-box;
					
					.exchangeImme{
						width: 100%;
						height: 80rpx;
						border-radius: 40rpx;
						background-color: #01cb88;
						color: #fff;
						text-align: center;
						line-height: 80rpx;
						font-weight: 36rpx;
					}
				}
			}
			
			
			.Specifications {
				width: 100%;
				position: fixed;
				background-color: #fff;
				bottom: 0px;
				left: 0px;
				z-index: 999;
				
				.Specifications-mask {
					width: 100%;
					height: auto;
					position: fixed;
					top: 0rpx;
					bottom: 0rpx;
					left: 0rpx;
					right: 0rpx;
					margin: 0rpx auto;
					background: rgba(0, 0, 0, 0.4);
					z-index: 1000;
				}
				.Specifications-popup {
					width: 100%;
					height: auto;
					position: fixed;
					bottom: 0rpx;
					left: 0rpx;
					right: 0rpx;
					z-index: 1001;
					background: #fff;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					
					.Specifications-popup-colse {
						position: absolute;
						top: 12rpx;
						right: 14rpx;
						font-size: 30rpx;
						color: #999;
						z-index: 1002;
					}
					.Specifications-popup-head {
						width: 94%;
						height: auto;
						margin: 0rpx auto;
						border-bottom: 3rpx #eee solid;
						display: flex;
						flex-direction: row;
						padding: 20rpx 0rpx;
						
						.Specifications-popup-head-img {
							
							.image {
								width: 200rpx;
								height: 200rpx;
								border: 3rpx #eee solid;
								display: block;
							}
						}
						.Specifications-popup-head-text {
							width: 75%;
							display: flex;
							flex-direction: column;
							box-sizing: border-box;
							padding-left: 3%;
							justify-content: space-around;
							
							.Specifications-popup-head-text-price {
								display: flex;
								flex-direction: row;
								color: #ff5831;
								font-weight: bold;
								display: table-cell;
								vertical-align: bottom;
								
								label {
									font-size: 24rpx;
									font-weight: bold;
									margin-right: 2%;
								}
								
								text {
									font-size: 36rpx;
								}
							}
							.Specifications-popup-head-text-parameter {
								font-size: 26rpx;
								color: #888;
								
								.text {
									margin-right: 3%;
								}
							}
							
							
						}
					}
					.Specifications-huadong {
						width: 100%;
						max-height: 600rpx;
						padding-top: 20rpx;
						
						.Specifications-popup-sele {
							width: 100%;
							height: auto;
							box-sizing: border-box;
							padding: 0rpx 3%;
							
							.Specifications-popup-sele-name {
								width: 100%;
								height: auto;
								font-size: 30rpx;
								color: #333;
								margin-bottom: 30rpx;
								margin-top: 30rpx;
							}
							.Specifications-popup-sele-list {
								width: 100%;
								height: auto;
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								
								.rmoiu {
									// background-color: #b3f7dd !important;
									// color: #01cb88 !important;
									// border: 3rpx solid #01cb88;
								}
								
								text {
									color: #131315;
									margin: 0rpx 0%;
									border-radius: 16rpx;
									text-align: center;
									box-sizing: border-box;
									min-width: 20%;
									// border: 3rpx #cdcdcd solid;
									background-color: #f2f2f4;
									margin-bottom: 30rpx;
									font-size: 24rpx;
									line-height: 50rpx;
									padding: 6rpx 2%;
									margin-right: 3%;
								}
							}
							
							
						}
					}
					.Specifications-popup-munbar {
						width: 100%;
						height: auto;
						box-sizing: border-box;
						padding:0 5%;
						display: flex;
						justify-content: space-between;
						margin: 100rpx 0;
					}
					.Specifications-popup-but {
						width: 100%;
						height: auto;
						display: flex;
						justify-content: space-between;
						padding: 40rpx 3%;
						box-sizing: border-box;
						border-top: 3rpx #eee solid;
						
						.exchangeImme{
							width: 100%;
							height: 80rpx;
							border-radius: 40rpx;
							background-color: #01cb88;
							color: #fff;
							text-align: center;
							line-height: 80rpx;
							font-weight: 36rpx;
						}
					
						.addcart {
							background-color: #01cb88;
						}
					
						.buy {
							background-color: #01cb88;
						}
						.label{
							text-align: center;
							border-radius: 80rpx;
							color: #fff;
							width: 100%;
							line-height: 80rpx;
						}
					}
					.Specifications-popup1{
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 40rpx 50rpx;
						box-sizing: border-box;
						border-top: 3rpx #eee solid;
										
						.addcart {
							border: 1rpx solid #01cb88;
							color: #01cb88;
							width: 45%;
						}
						
						.buy {
							background-color: #01cb88;
							color: #fff;
							width: 45%;
						}
						.label{
							text-align: center;
							border-radius: 80rpx;
							line-height: 80rpx;
						}
					}
				}
			}
		}
	}
</style>
